<template>
    <view class="qiaogoutong">
        <view class="header1">
            <view>
                <u-icon name="arrow-left" color="#2979ff" size="18" @click="icon"></u-icon>
            </view>
            <view>与客户沟通报价事宜</view>
            <view><img src="/static/img/bi.png" alt="" style="width: 20px;height: 20px;vertical-align: middle;"></view>
        </view>
        <view class="content2">
            <view class="twotong">
                <view>
                    <p style="color: #ccc;">任务类型</p>
                    <p style="color: #666; margin-top: 10px;">普通任务</p>
                </view>
                <view>
                    <p style="color: #ccc;">任务状态</p>
                    <p style="color: #666; margin-top: 10px;">进行中</p>
                </view>
                <view>
                    <p style="color: #ccc;">重要程度</p>
                    <p style="color: #666; margin-top: 10px;">重要</p>
                </view>
            </view>
            <view style="width: 360px; border-bottom: 1px solid #ccc;">
                <p style="width: 340px;margin-left: 15px; margin-bottom: 10px;">
                    <u-line-progress :percentage="50" activeColor="blue" height="8" inactiveColor="#ccc">
                        <text class="percentage">{{ 50 }}%</text>
                    </u-line-progress>
                </p>
            </view>
            <view style="display: flex; justify-content: space-between; padding: 10px 10px;">

                <view :class="{ active: currentTab === 0 }" @click="switchTab(0)" data-tab="0">任务动态</view>
                <view :class="{ active: currentTab === 1 }" @click="switchTab(1)" data-tab="1">任务详情</view>
                <view :class="{ active: currentTab === 2 }" @click="switchTab(2)" data-tab="2">评论记录</view>
                <view :class="{ active: currentTab === 3 }" @click="switchTab(3)" data-tab="3">相关附件</view>

            </view>
            <view>

                <view v-if="currentTab === 0">
                    <img src="/static/img/21.png" alt=""
                        style="width: 10px;height: 10px; margin-left: 30px; margin-top: 8px;"><span
                        style="color: #ccc; font-size: 13px;">08-23</span>
                    <li class="display">
                        <view><img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;margin-left: 15px;">
                        </view>
                        <view>
                            <p>赵小刚 <span style="color: #666; font-size: 13px;">销售经理</span> </p>
                            <p style=" font-size: 13px;">任务进度:10%，任务进行中原因备注:无</p>
                            <p style="color: #666; font-size: 13px;"><img src="/static/shizhong.png" alt=""
                                    style="width: 10px;height: 10px;">2019-08-23 22:31</p>
                        </view>
                        <view style="text-align: center;">
                            <p style="color: #666; font-size: 13px; padding: 10px 10px;">任务</p>

                        </view>
                    </li>
                    <img src="/static/img/21.png" alt=""
                        style="width: 10px;height: 10px; margin-left: 30px; margin-top: 8px;"><span
                        style="color: #ccc; font-size: 13px;">08-23</span>
                    <li class="display">
                        <view><img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;margin-left: 15px;">
                        </view>
                        <view>
                            <p>赵小刚 <span style="color: #666; font-size: 13px;">销售经理</span> </p>
                            <p style=" font-size: 13px;">任务进度:10%，任务进行中原因备注:无</p>
                            <p style="color: #666; font-size: 13px;"><img src="/static/shizhong.png" alt=""
                                    style="width: 10px;height: 10px;">2019-08-23 22:31</p>
                        </view>
                        <view style="text-align: center;">
                            <p style="color: #666; font-size: 13px; padding: 10px 10px;">任务</p>

                        </view>
                    </li>
                    <img src="/static/img/21.png" alt=""
                        style="width: 10px;height: 10px; margin-left: 30px; margin-top: 8px;"><span
                        style="color: #ccc; font-size: 13px;">08-23</span>
                    <li class="display">
                        <view><img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;margin-left: 15px;">
                        </view>
                        <view>
                            <p>赵小刚 <span style="color: #666; font-size: 13px;">销售经理</span> </p>
                            <p style=" font-size: 13px;">任务进度:10%，任务进行中原因备注:无</p>
                            <p style="color: #666; font-size: 13px;"><img src="/static/shizhong.png" alt=""
                                    style="width: 10px;height: 10px;">2019-08-23 22:31</p>
                        </view>
                        <view style="text-align: center;">
                            <p style="color: #666; font-size: 13px; padding: 10px 10px;">任务</p>

                        </view>
                    </li>
                    <img src="/static/img/21.png" alt=""
                        style="width: 10px;height: 10px; margin-left: 30px; margin-top: 8px;"><span
                        style="color: #ccc; font-size: 13px;">08-23</span>
                    <li class="display">
                        <view><img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;margin-left: 15px;">
                        </view>
                        <view>
                            <p>赵小刚 <span style="color: #666; font-size: 13px;">销售经理</span> </p>
                            <p style=" font-size: 13px;">任务进度:10%，任务进行中原因备注:无</p>
                            <p style="color: #666; font-size: 13px;"><img src="/static/shizhong.png" alt=""
                                    style="width: 10px;height: 10px;">2019-08-23 22:31</p>
                        </view>
                        <view style="text-align: center;">
                            <p style="color: #666; font-size: 13px; padding: 10px 10px;">任务</p>

                        </view>
                    </li>
                    <img src="/static/img/21.png" alt=""
                        style="width: 10px;height: 10px; margin-left: 30px; margin-top: 8px;"><span
                        style="color: #ccc; font-size: 13px;">08-23</span>
                    <li class="display">
                        <view><img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;margin-left: 15px;">
                        </view>
                        <view>
                            <p>赵小刚 <span style="color: #666; font-size: 13px;">销售经理</span> </p>
                            <p style=" font-size: 13px;">任务进度:10%，任务进行中原因备注:无</p>
                            <p style="color: #666; font-size: 13px;"><img src="/static/shizhong.png" alt=""
                                    style="width: 10px;height: 10px;">2019-08-23 22:31</p>
                        </view>
                        <view style="text-align: center;">
                            <p style="color: #666; font-size: 13px; padding: 10px 10px;">任务</p>

                        </view>
                    </li>
                </view>
                <view v-if="currentTab === 1" class="tab_two">
                    <p
                        style="background-color:rgb(249, 249, 249);  height: 40px; width: 360px; border: 1px solid #ccc; margin-left: 8px; line-height: 40px; margin-top: 10px;">

                        <img src="/static/img/22.png" alt="" style="width: 20px;height: 20px; vertical-align: middle;">基本信息
                    </p>
                    <p style="height: 40px; width: 360px; border: 1px solid #ccc; margin-left: 8px; line-height: 40px; ">

                        <span style="color: #666; margin-left: 8px;">任务类型</span>
                        <span style="float: right; margin-right: 8px;">普通任务</span>
                    </p>
                    <p style="height: 40px; width: 360px; border: 1px solid #ccc; margin-left: 8px; line-height: 40px; ">

                        <span style="color: #666; margin-left: 8px;">任务标题</span>
                        <span style="float: right; margin-right: 8px;">与客户沟通报价事宜</span>
                    </p>
                    <p style="height: 40px; width: 360px; border: 1px solid #ccc; margin-left: 8px; line-height: 40px; ">

                        <span style="color: #666; margin-left: 8px;">任务状态</span>
                        <span style="float: right; margin-right: 8px;">进行中(耗时3小时10分)</span>
                    </p>
                    <p style="height: 40px; width: 360px; border: 1px solid #ccc; margin-left: 8px; line-height: 40px; ">

                        <span style="color: #666; margin-left: 8px;">开始时间</span>
                        <span style="float: right; margin-right: 8px;">2019-03-20 12:00 </span>
                    </p>
                    <p style="height: 40px; width: 360px; border: 1px solid #ccc; margin-left: 8px; line-height: 40px; ">

                        <span style="color: #666; margin-left: 8px;">结束时间</span>
                        <span style="float: right; margin-right: 8px;">2019-03-20 12:00</span>
                    </p>
                    <p style="height: 40px; width: 360px; border: 1px solid #ccc; margin-left: 8px; line-height: 40px; ">

                        <span style="color: #666; margin-left: 8px;">紧要程度</span>
                        <span style="float: right; margin-right: 8px;">重要</span>
                    </p>
                    <p style="height: 40px; width: 360px; border: 1px solid #ccc; margin-left: 8px; line-height: 40px; ">

                        <span style="color: #666; margin-left: 8px;">关联业务</span>
                        <span style="float: right; margin-right: 8px; color: blue;">深圳木卫二科技有限公司</span>
                    </p>
                    <p style="height: 40px; width: 360px; border: 1px solid #ccc; margin-left: 8px; line-height: 40px; ">

                        <span style="color: #666; margin-left: 8px;">负责人员</span>
                        <span style="float: right; margin-right: 8px;">赵小刚</span>
                    </p>
                    <p style="height: 40px; width: 360px; border: 1px solid #ccc; margin-left: 8px; line-height: 40px; ">

                        <span style="color: #666; margin-left: 8px;">参与人员</span>
                        <span style="float: right; margin-right: 8px;">赵小刚、李小明、李小红</span>
                    </p>

                    <p style="height: 40px; width: 360px; border: 1px solid #ccc; margin-left: 8px; line-height: 40px; ">

                        <span style="color: #666; margin-left: 8px;">任务提醒</span>
                        <span style="float: right; margin-right: 8px;">准时</span>
                    </p>
                    <p style="height: 40px; width: 360px; border: 1px solid #ccc; margin-left: 8px; line-height: 40px; ">

                        <span style="color: #666; margin-left: 8px;">提醒方式</span>
                        <span style="float: right; margin-right: 8px;">系统信息</span>
                    </p>
                    <p style="height: 40px; width: 360px; border: 1px solid #ccc; margin-left: 8px; line-height: 40px; ">

                        <span style="color: #666; margin-left: 8px;">创建时间</span>
                        <span style="float: right; margin-right: 8px;">2019-03-20 12:00</span>
                    </p>
                    <p style="height: 40px; width: 360px; border: 1px solid #ccc; margin-left: 8px; line-height: 40px; ">

                        <span style="color: #666; margin-left: 8px;">最后更新</span>
                        <span style="float: right; margin-right: 8px;">2019-03-20 12:00</span>
                    </p>
                    <p
                        style="background-color:rgb(249, 249, 249);  height: 40px; width: 360px; border: 1px solid #ccc; margin-left: 8px; line-height: 40px; margin-top: 10px;">

                        <img src="/static/img/22.png" alt="" style="width: 20px;height: 20px; vertical-align: middle;">基本信息
                    </p>
                    <P style=" width: 360px; margin-left: 8px; line-height: 40px; margin-top: 10px;">
                        客户关系长期持久，源于让客户感受到价值和重要，是非常有利可图的。满足并保留您的客户群，确保未来获得丰厚的收入和利润。口碑也是强大的力量，忠诚的顾客会把你推荐给别人。通过提供优质的服务，保持联系并建立客户关系，改善和维护客户关系。
                    </P>

                </view>
                <view v-if="currentTab === 2" class="two_san">
                    <ul>

                        <li class="san_li">
                            <view>
                                <img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;">
                            </view>
                            <view style="font-size: 13px;">
                                <p style="color: #666;">周小明 销售经理</p>
                                <p style="color:#666;">请相关同事尽快帮忙落实解决</p>

                            </view>
                            <view style="text-align: center;">
                                <p style="display: flex; align-items: center;"> <img src="/static/shizhong.png" alt=""
                                        style="vertical-align: middle;margin-right: 5px; width: 10px; height: 10px;"> 22:31
                                </p>

                            </view>
                        </li>
                        <li class="san_li">
                            <view>
                                <img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;">
                            </view>
                            <view style="font-size: 13px;">
                                <p style="color: #666;">周小明 销售经理</p>
                                <p style="color:#666;">请相关同事尽快帮忙落实解决</p>

                            </view>
                            <view style="text-align: center;">
                                <p style="display: flex; align-items: center;"> <img src="/static/shizhong.png" alt=""
                                        style="vertical-align: middle;margin-right: 5px; width: 10px; height: 10px;"> 22:31
                                </p>

                            </view>
                        </li>
                        <li class="san_li">
                            <view>
                                <img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;">
                            </view>
                            <view style="font-size: 13px;">
                                <p style="color: #666;">周小明 销售经理</p>
                                <p style="color:#666;">请相关同事尽快帮忙落实解决</p>

                            </view>
                            <view style="text-align: center;">
                                <p style="display: flex; align-items: center;"> <img src="/static/shizhong.png" alt=""
                                        style="vertical-align: middle;margin-right: 5px; width: 10px; height: 10px;"> 22:31
                                </p>

                            </view>
                        </li>
                        <li class="san_li">
                            <view>
                                <img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;">
                            </view>
                            <view style="font-size: 13px;">
                                <p style="color: #666;">周小明 销售经理</p>
                                <p style="color:#666;">请相关同事尽快帮忙落实解决</p>

                            </view>
                            <view style="text-align: center;">
                                <p style="display: flex; align-items: center;"> <img src="/static/shizhong.png" alt=""
                                        style="vertical-align: middle;margin-right: 5px; width: 10px; height: 10px;"> 22:31
                                </p>

                            </view>
                        </li>
                        <li class="san_li">
                            <view>
                                <img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;">
                            </view>
                            <view style="font-size: 13px;">
                                <p style="color: #666;">周小明 销售经理</p>
                                <p style="color:#666;">请相关同事尽快帮忙落实解决</p>

                            </view>
                            <view style="text-align: center;">
                                <p style="display: flex; align-items: center;"> <img src="/static/shizhong.png" alt=""
                                        style="vertical-align: middle;margin-right: 5px; width: 10px; height: 10px;"> 22:31
                                </p>

                            </view>
                        </li>
                        <li class="san_li">
                            <view>
                                <img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;">
                            </view>
                            <view style="font-size: 13px;">
                                <p style="color: #666;">周小明 销售经理</p>
                                <p style="color:#666;">请相关同事尽快帮忙落实解决</p>

                            </view>
                            <view style="text-align: center;">
                                <p style="display: flex; align-items: center;"> <img src="/static/shizhong.png" alt=""
                                        style="vertical-align: middle;margin-right: 5px; width: 10px; height: 10px;"> 22:31
                                </p>

                            </view>
                        </li>
                        <li class="san_li">
                            <view>
                                <img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;">
                            </view>
                            <view style="font-size: 13px;">
                                <p style="color: #666;">周小明 销售经理</p>
                                <p style="color:#666;">请相关同事尽快帮忙落实解决</p>

                            </view>
                            <view style="text-align: center;">
                                <p style="display: flex; align-items: center;"> <img src="/static/shizhong.png" alt=""
                                        style="vertical-align: middle;margin-right: 5px; width: 10px; height: 10px;"> 22:31
                                </p>

                            </view>
                        </li>
                        <li class="san_li">
                            <view>
                                <img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;">
                            </view>
                            <view style="font-size: 13px;">
                                <p style="color: #666;">周小明 销售经理</p>
                                <p style="color:#666;">请相关同事尽快帮忙落实解决</p>

                            </view>
                            <view style="text-align: center;">
                                <p style="display: flex; align-items: center;"> <img src="/static/shizhong.png" alt=""
                                        style="vertical-align: middle;margin-right: 5px; width: 10px; height: 10px;"> 22:31
                                </p>

                            </view>
                        </li>
                        <li class="san_li">
                            <view>
                                <img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;">
                            </view>
                            <view style="font-size: 13px;">
                                <p style="color: #666;">周小明 销售经理</p>
                                <p style="color:#666;">请相关同事尽快帮忙落实解决</p>

                            </view>
                            <view style="text-align: center;">
                                <p style="display: flex; align-items: center;"> <img src="/static/shizhong.png" alt=""
                                        style="vertical-align: middle;margin-right: 5px; width: 10px; height: 10px;"> 22:31
                                </p>

                            </view>
                        </li>
                    </ul>
                </view>
            </view>
            <view v-if="currentTab === 3" class="two_san">
                <ul>

                    <li class="san_li" v-for="(item, index) in tabList" :key="index" @click="yulan">
                        <view>
                            <img :src="item.img" alt="" style="width: 40px;height: 40px;margin-top: 15px;">
                        </view>
                        <view style="font-size: 13px;">
                            <p style="color: #666;">{{item.name}}</p>
                            <p style="color:#666;">{{item.price}}</p>

                        </view>
                        <view style="text-align: center;">
                            <p style="margin-top: 15px;font-size: 20px; color: #666;"> &gt;</p>

                        </view>
                    </li>

                </ul>
            </view>
        </view>
        <view class="footer3">

        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
const icon = () => {
    uni.navigateBack({
        delta: 1
    })
}
const currentTab = ref(0)
const switchTab = (tab: number) => {
    currentTab.value = tab;
};

const tabList = ref([
    { id: 0, img: "/static/img/pdf.png",name:"合同扫描件.PDF",price:"2019-3-21 10:23 100KB赵小刚" },
    { id: 1, img: "/static/img/pdf.png",name:"合同扫描件.PDF",price:"2019-3-21 10:23 100KB赵小刚" },
    { id: 2, img: "/static/img/pdf.png",name:"合同扫描件.PDF",price:"2019-3-21 10:23 100KB赵小刚" },
    { id: 3, img: "/static/img/pdf.png",name:"合同扫描件.PDF",price:"2019-3-21 10:23 100KB赵小刚" },
    { id: 4, img: "/static/img/pdf.png",name:"合同扫描件.PDF",price:"2019-3-21 10:23 100KB赵小刚" },
    { id: 5, img: "/static/img/pdf.png",name:"合同扫描件.PDF",price:"2019-3-21 10:23 100KB赵小刚" },
    { id: 6, img: "/static/img/pdf.png",name:"合同扫描件.PDF",price:"2019-3-21 10:23 100KB赵小刚" },
    { id: 7, img: "/static/img/pdf.png",name:"合同扫描件.PDF",price:"2019-3-21 10:23 100KB赵小刚" },
    { id: 8, img: "/static/img/pdf.png",name:"合同扫描件.PDF",price:"2019-3-21 10:23 100KB赵小刚" },
])
const yulan=()=>{
    uni.navigateTo({
        url:"/pages/qiao-crm/qiaokehuguanli/qiaoyulan",
    })
}
</script>

<style lang="scss">
.two_san {
    height: 820px;
    margin-top: 10px;
    margin-left: 8px;
    width: 360px;

    .san_li {

        height: 100px;
        width: 360px;
        background-color: rgb(249, 249, 249);
        box-shadow: 0 0 10px #ccc;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;

        view {
            padding: 5px 10px;

        }
    }
}

.display {
    display: flex;
    justify-content: space-between;
    box-shadow: 0 0 10px #ccc;
    border-radius: 10px;
    width: 360px;
    margin-left: 8px;
    height: 80px;
    line-height: 25px;
}

.active {
    color: blue;
}

.percentage {
    padding: 1px 5px;
    color: #000;
    border-radius: 100px;
    font-size: 10px;
    margin-right: -150px;
}

.twotong {
    display: flex;
    padding: 30px 30px;
    justify-content: space-between;
    text-align: center;

}

.qiaogoutong {
    width: 100vw;
    height: 100vh;
}

.header1 {
    margin-top: 20px;
    height: 20px;
    display: flex;
    justify-content: space-between;
    padding: 20px 20px;
    border-bottom: 1px solid #ccc;
}

.content2 {
    height: calc(100% - 20px - 50px);
    overflow: hidden;
    overflow-y: scroll;
}

.footer3 {
    height: 50px;
}
</style>